<script setup lang="ts">
import type { TableItem } from "@/common/apis/train/type"
import { TaskStaticsTypeEnum, taskStatusMap } from "@@/constants/other-keys"

const props = defineProps<Props>()
const emit = defineEmits(["toggleSelect"])
interface Props {
  selected: boolean
  data: TableItem | undefined | {
    task_id: string
    task_process?: number
    task_status?: TaskStaticsTypeEnum
    task_name?: string
    task_describe?: string
    create_user?: { user_name: string }
    create_time?: string
  }
}

function handleChangeSelect() {
  emit("toggleSelect", props.data)
}

// 计算属性来处理样式
const lineDivTitleStyle = computed(() => {
  let width = 0
  const cardBodyElement = document.querySelector(".card-body")
  if (cardBodyElement) {
    // 获取元素的宽度
    width = cardBodyElement.getBoundingClientRect().width
  }

  // 确保数据存在并且有task_process属性
  const taskProcess = props.data?.task_process || 0

  const baseStyle = {
    position: "absolute" as const,
    left: `${taskProcess}%`,
    top: "-20px"
  }
  if (taskProcess !== 0 && (taskProcess / 100) * width > width - 30) {
    return { ...baseStyle, transform: "translateX(-100%)" }
  } else if (taskProcess > 24) {
    return { ...baseStyle, transform: "translateX(-50%)" }
  }

  return baseStyle
})
</script>

<template>
  <el-card class="card-item" :class="{ active: selected }" body-class="body" @click.stop="handleChangeSelect">
    <template v-if="data?.task_id !== 'no-select'">
      <div class="card-header flex-between">
        <el-space class="flex-vc">
          <el-icon>
            <UserFilled />
          </el-icon>
          <el-text>{{ data?.create_user?.user_name || '' }}</el-text>
        </el-space>
      </div>
      <div class="card-body flex-column">
        <div class="flex-start gap">
          <el-text truncated :title="data?.task_name">
            {{ data?.task_name }}
          </el-text>
        </div>
        <p class="describe" :title="data?.task_describe">
          {{ data?.task_describe }}
        </p>
      </div>
      <div class="line-div" style="position: relative;">
        <div
          class="line-div-title process"
          :class="`_${data?.task_status || '0'}`"
          :style="lineDivTitleStyle"
        >
          {{ data?.task_status !== undefined ? taskStatusMap[data.task_status] : '' }}
          {{ data?.task_process && data?.task_status !== undefined &&
             String(data.task_status) !== String(TaskStaticsTypeEnum.CREATED) &&
             String(data.task_status) !== String(TaskStaticsTypeEnum.ERROR) ?
             `${data.task_process}%` : '' }}
        </div>
        <div
          class="line-div-color"
          :class="`_${data?.task_status || '0'}`"
          :style="`width: ${data?.task_process || 0}%; background: '#409eff'`"
        />
      </div>
      <div class="card-footer">
        <div class="title">
          <el-icon color="#6B98D7">
            <Calendar />
          </el-icon>
          <span>{{ data?.create_time || '' }}</span>
        </div>
      </div>
    </template>
    <template v-if="data?.task_id == 'no-select'">
      <div class="card-body-blank flex-center">
        <el-icon><Plus /></el-icon>
      </div>
    </template>
  </el-card>
</template>

<style lang="scss" scoped>
.card-body-blank {
  width: 100%;
  height: 100%;
  font-size: 40px;
}
.card-footer {
  padding: calc(var(--main-padding) - 1px) 0 0 0 !important;
}
.card-header {
  padding: 0 0 calc(var(--main-padding) - 1px) 0 !important;
}
.card-body {
  padding: calc(var(--main-padding) - 1px) 0 !important;
}

.line-div {
  width: 100%;
  height: 1px;
  background-color: #2a3547;
  position: relative;
  &-title {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  & > .line-div-color {
    height: 1px;
    position: absolute;
    z-index: 99;
    &._0 {
      background-color: rgb(31, 119, 222);
    }
    &._1 {
      background-color: rgb(255, 163, 24);
    }
    &._2 {
      background-color: rgb(0, 187, 153);
    }
    &._3 {
      background-color: rgb(245, 108, 108);
    }
    &._4 {
      background-color: rgb(96, 111, 145);
    }
  }
}

.process {
  &._0 {
    color: rgb(31, 119, 222);
  }
  &._1 {
    color: rgb(255, 163, 24);
  }
  &._2 {
    color: rgb(0, 187, 153);
  }
  &._3 {
    color: rgb(245, 108, 108);
  }
  &._4 {
    color: rgb(96, 111, 145);
  }
}

:deep(.body) {
  width: 100%;
  height: 100%;
  padding: var(--main-padding) !important;
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 4px 4px;
}
.card-item {
  transition: all 0.2s ease;
}

.card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card-item.active {
  border: 4px solid #409eff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.describe {
  display: -webkit-box; /* 必须结合 -webkit-line-clamp 使用 */
  -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
  -webkit-line-clamp: 3; /* 显示的行数 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: normal; /* 允许文本换行 */
  margin-bottom: 0px;
  color: rgba(250, 250, 250, 0.8);
  line-height: 22px;
  font-size: 12px;
}
</style>
